<template>
	<div>
		<div>
			<h3 class="brand-top">品牌商旗舰店</h3>
			<p class="brand-top-line"></p>
		</div>
		<div>
			<div v-for="(item,index) in brandData" :key="item.id" style="margin-top: 15px;">
				<div class="brand-left">
					<router-link :to="{path: '/branddetail', query: {id:item.id}}">
						<div class="brand-title" :style="{backgroundColor:titleBg[index]}">
							{{item.name}}
						</div>
						<div>
							<img :src="item.app_list_pic_url" />
						</div>
					</router-link>
				</div>
				<div class="brand-right">
					<div class="brand-img-c" v-for="subitem in item.products" :key="subitem.id">
						<router-link :to="{path: '/productdetail', query: {id:subitem.id}}">
						<el-card :body-style="{ padding: '0px' }">
							<img :src="subitem.list_pic_url" class="brand-image" />
							<div style="padding: 5px; text-align: center;">
								<span style="font-size: 10px;display: block;height: 40px;">{{subitem.name}}</span>
								<div class="bottom clearfix">
									<time class="brand-img-yuan">现价 ￥{{subitem.retail_price}}</time>
								</div>
							</div>
						</el-card>
						</router-link>
					</div>
				</div>
				<div style="clear: both;"></div>
			</div>
		</div>
		<div style="text-align: center;margin-top: 20px;">
			<el-pagination background layout="prev, pager, next" :total="1000" @current-change="handleCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				titleBg: [
					'red',
					'#00FFFF',
					'#3A8EE6',
					'#5DAF34',
					'green',
					'blue',
					'#880000',
					'#5E740B',
					'#00FFFF',
					'#3A8EE6',
					'#5DAF34',
					'green',
					'blue',
					'#880000',
					'#5E740B',
					'#00FFFF',
					'#3A8EE6',
					'#5DAF34',
					'green',
					'blue',
					'#880000',
					'#5E740B'
				],
				brandData: [{
					id: '1',
					name: '施耐德电气品牌旗舰店',
					imgeUrl: require('../../assets/carous/shinaide.png'),
					products: [{
						imgUrl: require('../../assets/carous/shinaide.png'),
						title: '施耐德RXZ经济型基座1',
						price: '99.99'
					}],
				}]
			};
		},
		mounted: function() {
			this.initBrand();
		},
		methods: {
			initBrand(page) {
				let _this = this;
				_this.brandData.pop();
				var params = new URLSearchParams();
				if (page) {
					params.append('page', page);
				} else {
					params.append('page', 1);
				}
				_this.$axios.post(_this.$api.BrandListAll, params).then(function(response) {
						_this.brandData = response.data.data.result.data;
						for (var i = 0; i < _this.brandData.length; i++) {
							//_this.brandData[i].products = response.data.data[_this.brandData[i].id];
							_this.brandData[i].products = [];
							for (var j = 0; j < response.data.data[_this.brandData[i].id].length; j++) {
								if (j > 7) {
									break;
								}
								_this.brandData[i].products.push(response.data.data[_this.brandData[i].id][j]);
							}
						}
					})
					.catch(function(error) {
						console.log(error)
					});
			},
			handleCurrentChange(val) {
				this.initBrand(val);
			}
		}
	}
</script>

<style>
	.brand-image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.brand-top {
		color: #00AB42;
	}

	.brand-top-line {
		height: 2px;
		background-color: #008800;
	}

	.brand-left {
		float: left;
		width: 40%;
	}

	.brand-left img {
		width: 100%;
	}

	.brand-right {
		float: right;
		width: 60%;
	}

	.brand-title {
		height: 80px;
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		line-height: 80px;

	}

	.brand-img-c {
		float: left;
		width: 20%;
		
		margin: 0px 5px 10px 5px;
		padding: 5px;
	}

	.brand-img-cl {
		height: 162px;
		margin: 0px 10px 5px 10px;
	}

	.brand-img-cl img {
		width: 100%;
		height: 140px;
	}

	.brand-img-title {
		text-align: center;
		height: 18px;
		line-height: 18px;
		font-size: 12px;
	}

	.brand-img-yuan {
		color: red;
		font-weight: bold;
		text-align: center;
		height: 22px;
		line-height: 22px;
	}
</style>
